<template>
  <div id="whatislightlesson">
    <div class="bluebg">
      <Row>
        <Col span="24" class="maxTitle">
        <!-- 大标题 -->
          <span>{{lightlesson.maxTitle}}</span>
        </Col>
      </Row>
      <Row>
        <!-- 描述 -->
        <Col span="24" class="description">{{lightlesson.desc}}</Col>
      </Row>
      <Row class="mac">
        <Col span="24">
        <!-- 视频上的图片 -->
          <Row
            class="screenimg_size"
            :style="`background: url(${lightlesson.imgLocation}) no-repeat;background-size: 100% 100%;`"
            v-show="!switchValue"
          >
            <!-- 视频中间标题 -->
            <Col span="24">
              <Row class="screendark">
                <Col span="24" class="title">
                  <p>{{lightlesson.title}}</p>
                </Col>
                  <!-- 视频中间下方描述 -->
                <Col span="24" class="des">
                  <p>{{lightlesson.des}}</p>
                </Col>

                <Col span="24">
                  <!-- 视频上的黄色按钮 -->
                  <Button
                    type="warning"
                    class="btnyello"
                    @click="()=>{this.switchValue=!this.switchValue}"
                    size="small"
                  >{{lightlesson.btnTitle}}</Button>
                </Col>

                <Col span="24" class="btnplay">
                  <img src="./image/whatislightlesson/light-play.svg" />
                </Col>
              </Row>
            </Col>
          </Row>
          <Row class="screenimg_size" v-show="switchValue">
            <Col span="24">
              <!-- 视频组件 -->
              <Video id="dplayer" :videUrl="this.lightlesson.videoUrl" width="100%" height="221px" />
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
//导入iview-ui组件
import { Row, Col, Button } from "view-design";
//导入视频组件
import Video from "../../components/video/video";

export default {
  name: "whatislightlesson",
  //组件注册
  components: {
    Row,
    Col,
    Button,
    Video
  },
  data() {
    return {
      switchValue: false    //视频上的图片显示切换变量
    };
  },
  //传入属性
  props: ["lightlesson"],
  computed: {},
  watch: {},
  methods: {},
  created() {},
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
/* 局部修改UI样式 */
.bluebg {
  background: url("./image/whatislightlesson/light-bg.png") no-repeat;
  background-size: 100% 80%;
  font-size: 12px;
  color: white;
  text-align: center;
}
.maxTitle {
  margin: 40px auto 12px;
  font-size: 24px;
}
.description {
  padding: 0 24px 24px;
  line-height: 18px;
}
.mac {
  background: url("./image/whatislightlesson/light-mac.png") no-repeat;
  background-size: 100% 100%;
  background-position: center;
  width: 334px;
  height: 208px;
  margin: 0 auto;
  padding: 10px auto;
}

.screenimg_size {
  margin: 10px 36px;
  border-radius: 3px;
}
.screendark {
  background-color: #00000077;
}
.title {
  font-size: 16px;
  margin: 48px auto 10px;
}
.des {
  padding: 8px;
}
.btnyello {
  background-color: #fde021;
  border: none;
  color: black;
  font-size: 12px;
  padding: 0 18px;
}
.btnplay {
  text-align: right;
  margin: 7px 0 15px 0;
  padding: 0 15px 0;
}
</style>